$(function () {
    if (localStorage.getItem('goods')) {
        //本地存储的数据
        var goodsArr = JSON.parse(localStorage.getItem('goods'))


        $.ajax({
            url: '../data/data3.json',
            type: 'get',
            datatype: 'json',
            success: function (data) {
                var strDom3 = ''
                $.each(data, function (index, item) {
                    $.each(goodsArr, function (ind, obj) {

                        if (obj.key === "ture" && obj.id === item.id) {

                            var goods = `
                <div class="product_left">
                <div class="leftBox">
                <div class="pic">
                    <img src="${item.img4}" alt="">
                </div>
                <div class="mask">

                </div>
            </div>
                <div class="box">
                    <ul class="clearfix list">
                        <a href="javascript:;"><img src="../imgs/right.png" alt=""></a>
                        <li><img src="${item.img4}" id="img" class="current"></li>
                        <li><img src="${item.img2}" id="img"></li>
                        <li><img src="${item.img3}" id="img" ></li>
                        <li><img src="${item.img1}" id="img" ></li>
                        <li><img src="${item.img5}" id="img"></li>
                        <a href="javascript:;"><img src="../imgs/left.png" alt=""></a>
                    </ul>
                </div>
            </div>
                <div id="rightBox">
                    <img src="${item.img4}" alt="">
                </div>
            
            <div class="product-right">
                <div class="title">
                    <h1>${item.title}</h1>
                </div>
                <div class="skuPromWord">
                    <h3>${item.word}</h3>
                </div>
                <div class="product-info">
                    <h3><span>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 格</span><a><em>￥</em><b>${item.price}</b></a></h3>
                    <h3><span>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 销</span><a><i>一站式换新</i>以旧换新最高补贴500元</a></h3>
                    <h3><span></span><a><i>整点购机限量赠</i> 0/10/12/16/20点整点购机限量赠专属保护套</a></h3>
                    <h3><span></span><a><i>分期免息</i>银联、花呗、掌上生活、工行分期支付可享免息（免息活动适用于单款免息商品订单，含多</a></h3>
                    <h3><span></span><a><i>赠送积分</i>购买即赠商城积分，积分可抵现~</a></h3>
                
                </div>
                <div class="bianma">
                    <h3><span>商品编码</span><i>${item.bianma}</i></h3>
                </div>
                <div class="choose clearfix">
                    <i>选择颜色</i>
                    <ul class="clearfix">
                        <li><a class="selected1"><img src="${item.img6}" alt="">${item.color1}</a></li>
                        <li><a><img src="${item.img7}" alt="">${item.color2}</a></li>
                        <li><a><img src="${item.img8}" alt="">${item.color3}</a></li>
                    </ul>
                </div>
                <div class="tuijian">
                    <i>推荐</i>
                    <a href="">HUAWEI FreeLace Pro 无线耳机</a>
                    <a href="">HUAWEI FreeLace 无线耳机</a>
                    <a href="">MOMAX HUAWEI FreeBuds 4i 无线耳机保护套</a>
                    <a href="">咪咕 HUAWEI Freebuds 4i无线耳机保护套</a>
                </div>
                <div class="selected">
                    <h3><i>已选择商品</i><span> 陶瓷白</span></h3>
                </div>
                <div class="addCar">
                    <div class="shuliang" data-id="${item.id}" data-num="${item.num}">
                        <input type="text" name="" id="" value="${obj.num}">
                        <button class="jia">+</button>
                        <button class="jian">-</button>
                    </div>
                    <a href="javascript:;" class="button1" data-id="${item.id}">加入购物车</a>
                    <a href="http://localhost:3001/goodsCar.html" class="button2">立即下单</a>
                </div>
            </div>
            </div>
                `
                            strDom3 += goods

                        }
                    })
                })
                $('.product .main').html(strDom3)
            }

        })
     
    }

    setTimeout(function () {
        var todolist = {
            init: function () {
                this.catchElement()
                this.bindEvent()
            },
            catchElement: function () {
                //获取大盒子对象
                this.div1 = document.querySelector('.product')
            },
            bindEvent: function () {
                var _this = this
                //实例化对象
                new Fang(this.div1)

                if (localStorage.getItem('name')) {
                    var nameArr = JSON.parse(localStorage.getItem('name'))
                } else {
                    var nameArr = []
                }
                $.each(nameArr, function (index, item) {
                    $('.login').html(item.name)

                })
                $('.login').on('click',function(){
                    var urlArr = []
                    var url1 = window.location.href
                    console.log(url1)
                    urlArr.push({'url':url1})
                    localStorage.setItem('url',JSON.stringify(urlArr))
                })
            


                if (localStorage.getItem('goumai')) {
                    var goumaiArr = JSON.parse(localStorage.getItem('goumai'))
                } else {
                    var goumaiArr = []
                }
                //为加法按钮绑定点击事件
                $('.shuliang').on('click', '.jia', function () {
                    var _this = this
                    var id = $(this).parent().attr('data-id')

                    // $(this).prev('input').attr("value",num)
                    // goodsArr.push({'id':id,'num':num})
                    var num = $(_this).prev('input').attr("value")
                    var flag = false
                    $.each(goumaiArr, function (index, item) {
                        
                        if (item.id === id) {
                            item.num++
                            num = item.num
                            $(_this).prev('input').attr("value", num)
                            flag = true
                        }

                    })
                    if(!flag){
                        goumaiArr.push({'id':id,'num':num})
                    }
                    localStorage.setItem('goumai', JSON.stringify(goumaiArr))
                })
                //为减法按钮绑定点击事件
                $('.shuliang').on('click', '.jian', function () {
                    var _this = this
                    var id = $(this).parent().attr('data-id')
                    var flag = false
                    var num = $(_this).siblings('input').attr("value")
                    //遍历goodsArr中的每一个元素
                    $.each(goumaiArr, function (index, item) {

                        //当id相等时执行减法
                        if (item.id === id) {
                            flag = true
                            if (item.num != 1) {
                                item.num--
                                num = item.num
                                $(_this).siblings('input').attr("value", num)
                                

                            }
                        }

                    })
                    if(!flag){
                        goumaiArr.push({'id':id,'num':num})
                    }
                    localStorage.setItem('goumai', JSON.stringify(goumaiArr))
                })
                $('.button1').on('click', function () {
                    //window.location.href='http://localhost:3001/goodsCar.html'
                    var id = $(this).attr('data-id')
                    var num = 1;
                    var flag = false
                    $.each(goumaiArr, function (index, item) {
                        if (item.id === id) {
                            num = item.num
                            flag = true
                        }
                    })
                    if (!flag) {
                        goumaiArr.push({ 'id': id, 'num': num })
                    }
                    localStorage.setItem('goumai', JSON.stringify(goumaiArr))
                    // alert('加入购物车成功！')
                })
                function Login() {
                    this.login = document.createElement('div')
                    this.login.className = 'login1'
                    this.login.innerHTML = `<p>✅HUAWEI P40 Pro+ 5G 全网通 8GB+256GB（陶瓷白）成功加入购物车!</p>
                      <a class="guang">再逛逛</a><a href="http://localhost:3001/goodsCar.html">去结算</a>`
                    document.body.appendChild(this.login)
                    this.bindEvent()
                }
                Login.prototype.bindEvent = function () {
                    var close = document.querySelector('.login1 .guang')
                    close.onclick = function () {
                        this.login.style.display = 'none'
                        $('.mask1').attr("style", "display:none")
                    }.bind(this)
                }
                Login.prototype.show = function () {
                    this.login.style.display = 'block'
                }
                function Mask() {
                    this.mask = document.createElement('div')
                    this.mask.className = 'mask1'
                    document.body.appendChild(this.mask)
                }
                // 管理单例的逻辑!!!
                var getSingle = function (constructor) {
                    var instance = null
                    return function () {// <- singleLogin
                        // if (instance) {
                        //     return instance
                        // }
                        // return instance = new constructor()
                        return instance || (instance = new constructor())
                    }
                }
                var singleLogin = getSingle(Login)
                var singleMask = getSingle(Mask)

                // console.log( singleLogin() === singleLogin() )//true
                $('.button1').on('click', function () {
                    console.log(1)
                    $('.mask1').attr("style", "display:block")
                    singleMask()
                    singleLogin().show()
                })
                //遍历每一个
                for(let i=0;i<$('.choose li a').length;i++){
                    //为每一个a绑定点击事件
                    $('.choose li a')[i].onclick = function(){
                        //清除
                        $('.choose li a').attr('class','')
                        //设置
                        this.setAttribute('class','selected1');
                        
                    }               
                }
            }
        }
        //调用init函数
        todolist.init()
    }, 100)


})